<template>
<div>
    <div class="j-com">
  
        
    </div>
    <div class="j-ipg">
        <img src="./gwc.png" alt="">
        <span>购物车</span>
    </div>
    <div class="j-nav">
        <table class="j-tab">
            <tr class="j-gg">
                <th>
                    <input type="checkbox" v-model="allSelect" @click="all">
                </th>
                <th class="j-ai j-sg">爱果果水果店</th>
                <th>规格</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in wddd" :key="index" class="j-zi">
                <td>
                    <input type="checkbox" v-model="item.bol" @change="changeBol(index)">
                </td>
                <td class="j-ai"><img :src="item.image" alt="" class="j-img"></td>
                <td class="j-ai j-yu">{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>&yen;{{item.num}}</td>
                <td class="j-zy">
                    <span @click="jian(index)" class="j-jian">-</span>
                    <span class="j-age">{{item.age}}</span>
                    <span @click="add(index)" class="j-add">+</span>
                </td>
                <td class="j-jg">&yen;{{item.sum}}</td>
                <td>
                    <button @click="del(index)" class="j-shan">删除</button>
                </td>
            </tr>
            <div class="j-je">商品金额&nbsp;&nbsp;&nbsp;<span>&yen;{{allPrice}}</span></div>
            </table>
        
    </div>
    <div class="j-batch">
        <div class="j-batq">
            <span @click="all">全选</span>
            <span @click="delall">批量删除</span>
        </div>
        <div class="j-batsp">
            <span>商品总计&nbsp;&nbsp;:&nbsp;&nbsp;<span class="j-batpa">&yen;{{allPrice}}</span></span>
            <button>立即购买</button>
        </div>
    </div>
</div>
</template>

<script>
import {mapState} from 'vuex';
    export default {
        name:   '',
        data(
            
        ) {
            return {
                allSelect: false,
            }
        },
        computed: {
                ...mapState(['wddd']),
            allPrice() {
                let he = 0;
                for(let i = 0; i < this.wddd.length; i ++) {
                    if (this.wddd[i].bol) {
                        he += this.wddd[i].sum;
                    }
                }
                return he
            }
        },
        methods: {
            all() {
                for(let i = 0; i < this.wddd.length; i ++) {
                    this.wddd[i].bol =! this.allSelect
                }
            },
            add(index) {
                let item = this.wddd[index]
                item.age++;
                item.sum = item.age * item.num
            },
            jian(index) {
                let item = this.wddd[index]
                if (item.age < 2) {
                    alert('数量不能为0')
                    return
                }
                item.age--
                item.sum = item.age * item.num
            },
            changeBol(index) {
                let item = this.wddd[index]
                this.allSelect = this.wddd.every(item => item.bol)
            },
            del(index) {
                if (confirm('你确定要删除吗?')) {
                    this.wddd.splice(index, 1)
                }
            },
            delall(index) {
                if (confirm('你确定要删除吗?')) {
                 
                }
            }
            
        }
    }
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.j-nav {
    margin-top: -15px;
}
.j-tab {
    /* border: 1px solid #333; */
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
   line-height: 35px;
       text-align: center;
}
.j-tab tr {
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2f2;
}
.j-ai {
    display: flex;
    flex-direction: column
}
.j-img {
    width: 50px;
    height: 50px;
    border: 1px solid #f2f2f2;
}
.j-yu {
    margin-top: -35px;
    margin-left: 55px;
}
.j-zy {
    display: inline-block;
    border: 1px solid #666;
    width: 90px;
    height: 20px;
    line-height: 20px;
    margin-top: -35px;
}
.j-zi {
    color: #999;
}
.j-gg {
    background: #f2f2f2;
    width: 80%;
    height: 50px;
    color: #333;
}
.j-jg {
    color: #333;
    width: 100px;
}
.j-sg {
    margin-top: 15px;
}
.j-jian {
    border-right: 1px solid #333;
    /* padding-right: 6px;
    margin-right: 10px; */
    font-size: 18px;
    cursor: pointer;
    background: #f2f2f2;
    width: 25px;
    display: inline-block;

}
.j-add {
    border-left: 1px solid #333;
    /* padding-left: 3px;
    margin-left: 15px; */
    font-size: 18px;
    cursor: pointer;
    background: #f2f2f2;
    width: 25px;
    display: inline-block;
}
.j-age {
    display: inline-block;
    width: 28px;
    margin-right: 5px;
    padding-left: 5px;
}
.j-shan {
    border: 0;
    color: #498e3d;
    background: 0;
    cursor: pointer;
    
}
.j-je {
    position: absolute;
    right: 11%;
    line-height: 45px;
   
}
.j-je span {
    color: #ff5757;
}
.j-com {
    display: flex;
    justify-content: space-around;
}
.j-com img {
    width: 295px;
    height: 55px;
    cursor: pointer;
    margin-left: 1%;
}
.j-wd {
    margin-top: 2%;
    margin-left: 5%;
}
.j-wd span {
  cursor: pointer;
}
.j-wd span:nth-child(1) {
    color: #f08200;
}
.j-ipg {
    display: flex;
    margin-left: 11%;
    overflow: hidden;
    margin-top: 10px;
}
.j-ipg img {
    width: 20px;
    height: 20px;
}
.j-ipg span {
    margin-left: 7px;
}
.j-batsp {
    margin-right: 160px;
}
.j-batch {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.j-batq {
    margin-left: 160px;
    color: #498e3d;
    cursor: pointer;
}
.j-batq span:nth-child(2) {
    margin-left: 30px;
}
.j-batsp {
    margin-right: 160px;
}
.j-batsp span {
    margin-right: 25px;
}
.j-batsp button {
    border: 0;
    background: #f08200;
    width: 110px;
    height: 40px;
    border-radius: 5px;
    color: #f2f2f2;
    cursor: pointer;}
.j-batpa {
    color: #ff5757;
}
</style>